window.onload=function()
{
	var axis=new Array();
	for (var x=0;x<64;x++)
	{
		axis[x]=new Array();
		for (var y=0;y<36;y++)
		{
			$(".box").append("<div class='grid' id='a"+x+"_"+y+"' style='bottom:"+(y*20)+"px;left:"+(x*20)+"px;' onclick=\"obstacle('a"+x+"_"+y+"')\" onmouseover=\"if (per==1){obstacle('a"+x+"_"+y+"')}\"></div>");
			//0是可选取，1是有障碍物，2是已走过,3是最小代价点
			axis[x][y]=0;
		}
	}
	window.axis=axis;
	document.getElementById("a0_0").style.backgroundColor="pink";
	document.getElementById("a63_35").style.backgroundColor="pink";
}
var per=0;

function getPosition(id)
{
	id=id.replace("_",",");
	id=id.replace("a","[");
	var position=eval(id+"]");
	return position;
}

function obstacle(id)
{
	var position=getPosition(id);
	var x=parseInt(position[0]);
	var y=parseInt(position[1]);
	if (axis[x][y]==1)
	{
		axis[x][y]=0;
		document.getElementById(id).style.backgroundColor="#eee";
	}
	else if (axis[x][y]==0)
	{
		axis[x][y]=1;
		document.getElementById(id).style.backgroundColor="#999";
	}
}

var x_=63;
var y_=35;
//x,y,代价,父级x,父级y,步数
var open=[[0,0,98,0,0,0]];
var open_min=new Array();
var min=999;
var store=[[0,0,98,0,0,0]];

function way()
{	
	for (var m=0;m<64;m++)
	{
		for (var n=0;n<36;n++)
		{
			if (axis[m][n]=="open")
			{
				document.getElementById("a"+m+"_"+n).style.backgroundColor="blue";
			}
			else if (axis[m][n]=="close")
			{
				document.getElementById("a"+m+"_"+n).style.backgroundColor="#aaa";
			}
		}
	}
	open_min=new Array();
	min=999;
	var loop=1;
	for (var i=0;i<open.length;i++)
	{
		var distance=open[i][2];
		if (distance<min)
		{
			open_min=new Array();
			open_min[0]=new Array();
			for (var q=0;q<6;q++)
			{
				open_min[0][q]=open[i][q];
			}
			min=distance;
		}
		else if (distance==min)
		{
			var len_=open_min.length;
			open_min[len_]=new Array();
			for (var p=0;p<6;p++)
			{
				open_min[len_][p]=open[i][p];
			}
		}
		window.open=open;
		window.open_min=open_min;
		window.min=min;
	}

	for (var j=0;j<open_min.length;j++)
	{
		var x=open_min[j][0];
		var y=open_min[j][1];
		var f_step=open_min[j][5];
		var x1=x+1;var y1=y;
		var x2=x;var y2=y+1;
		var x3=x-1;var y3=y;
		var x4=x;var y4=y-1;
		axis[x][y]="min";
		for (k=1;k<=4;k++)
		{
			var x_temp=eval("x"+k);
			var y_temp=eval("y"+k);
			if (x_temp>=0 && x_temp<=63 && y_temp>=0 && y_temp<=35 && axis[x_temp][y_temp]==0)
			{
				var distance=Math.abs(x_temp-x_)+Math.abs(y_temp-y_);
				var cost=distance+f_step+1;
				var temp_list=[x_temp,y_temp,cost,x,y,(f_step+1)];
				var len=open.length;
				var len1=store.length;
				open[len]=new Array();
				store[len1]=new Array();
				for (var l=0;l<6;l++)
				{
					open[len][l]=temp_list[l];
					store[len1][l]=temp_list[l];
				}
				axis[x_temp][y_temp]="open";
				//document.getElementById("a"+x_temp+"_"+y_temp).innerHTML=cost;
				document.getElementById("a"+x_temp+"_"+y_temp).style.backgroundColor="blue";
			}
				
			if (x_temp==x_ && y_temp==y_)
			{
				loop=[x,y];
			}
		}
		document.getElementById("a"+x+"_"+y).style.backgroundColor="yellow";
		var open_temp=new Array();
		for (var d=0;d<open.length;d++)
		{
			if (x==open[d][0] && y==open[d][1])
			{
				open.splice(d,1);
			}
		}
		axis[x][y]="close";
	}
	window.open=open;
	if (loop==1)
	{
		setTimeout(function(){way()},100);
		//way();
	}
	else
	{
		index=store.length-1;
		find_way(loop[0],loop[1]);
	}
}

var index=0;
function find_way(x,y)
{
	while (store[index][0]!=x || store[index][1]!=y)
	{
		index--;
	}
	document.getElementById("a"+x+"_"+y).style.backgroundColor="#00cc47";
	axis[x][y]="way";
	f_x=store[index][3];
	f_y=store[index][4];
	window.index=index;
	if (f_x!=0 || f_y!=0)
	{
		setTimeout(function(){find_way(f_x,f_y)},50)
	}
	else
	{
		for (var m=0;m<64;m++)
		{
			for (var n=0;n<36;n++)
			{
				if (axis[m][n]=="way")
				{
					document.getElementById("a"+m+"_"+n).style.backgroundColor="#oocc47";
				}
				else if (axis[m][n]=="1")
				{
					document.getElementById("a"+m+"_"+n).style.backgroundColor="#999";
				}
				else
				{
					document.getElementById("a"+m+"_"+n).style.backgroundColor="#eee";
				}
			}
		}
		document.getElementById("a0_0").style.backgroundColor="pink";
		document.getElementById("a63_35").style.backgroundColor="pink";
	}
}

function refresh()
{
	window.location.reload()
}